<!--
 * @Author: chen qi
 * @Date: 2022-07-10 00:33:09
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-12 15:10:32
 * @Description:
-->
<template>
  <div
    :ref="`superpositionBar${id}`"
    class="superposition-bar-chart"
  >
  </div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  name: 'superpositionBarChart',
  mixins: [commonMixin],
  props: {
    id: {
      type: [Number, String],
      default: 1
    },
    data: {
      type: Array,
      default: () => {
        return [
          {
            sort: 1,
            name: '分行1',
            value: 100
          },
          {
            sort: 2,
            name: '分行2',
            value: 90
          },
          {
            sort: 3,
            name: '分行3',
            value: 80
          },
          {
            sort: 4,
            name: '分行4',
            value: 70
          },
          {
            sort: 5,
            name: '分行5',
            value: 60
          }
        ]
      }
    },
    // 坐标
    position: {
      type: Object,
      default: () => {
        return {
          top: '12%',
          left: '3%',
          right: '10%',
          bottom: '0%'
        }
      }
    }
  },
  data() {
    return {
      resDebounce: null,
      chart: null,
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        boundaryGap: true,
        legend: {
          top: 20,
          right: 0,
          textStyle: {
            color: '#666',
            fontSize: 13
          },
          itemWidth: 16,
          itemHeight: 10,
          itemGap: 12
          // icon: 'circle'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1ea1be'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#1ea1be'
            }
          },
          axisLabel: {
            color: '#767c86'
          }
        },
        yAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['一月', '二月', '三月', '四月'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#27c9ee'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#27c9ee'
            },
            alignWithLabel: true
          },
          axisLabel: {
            color: '#767c86'
          }
        },
        series: [
          {
            name: '掌银充值',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            animationDelay: function(idx) {
              return idx * 50 + 1000
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#0c59e9' // 0% 处的颜色
                }, {
                  offset: 1, color: '#75a3fe' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [320, 302, 301, 334]
          },
          {
            name: '线下充值',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            animationDelay: function(idx) {
              return idx * 50 + 1000
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#1dd9a4' // 0% 处的颜色
                }, {
                  offset: 1, color: '#b9feea' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [120, 132, 101, 134]
          },
          {
            name: '餐补',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },

            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#f5cd18' // 0% 处的颜色
                }, {
                  offset: 1, color: '#feefb1' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            animationDelay: function(idx) {
              return idx * 50 + 1000
            },
            data: [220, 182, 191, 234]
          },
          {
            name: '赠送',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            animationDelay: function(idx) {
              return idx * 50 + 1000
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#e66' // 0% 处的颜色
                }, {
                  offset: 1, color: '#8a4255' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [150, 212, 201, 154]
          },
          { // 新的一个柱子 注意不设stack
            name: '',
            type: 'bar',
            barGap: '-100%', // 左移100%，stack不再与上面两个在一列
            label: {
              show: true, // 显示数值
              position: 'right', //  位置设为top
              formatter(e) {
                return e.value.toString().replace(/(?!^)(?=(\d{3})+$)/g, ',')
              },
              textStyle: { color: '#fff' } // 设置数值颜色
            },
            itemStyle: {
              color: 'rgba(128, 128, 128, 0)' // 设置背景颜色为透明
            },
            data: [810, 828, 794, 856]
          }
        ],
        animationEasing: 'elasticOut',
        animationDuration: 2000,
        // animationDelayUpdate: function (idx) {
        //   return idx * 50 + 1000;
        // }
        barWidth: 20
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs[`superpositionBar${this.id}`])
    this.chart.setOption(this.option)
    let indexSort = 0
    setInterval(() => {
      indexSort = indexSort === 4 ? 0 : indexSort + 1
      this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0, // 显示第几个series
        dataIndex: indexSort // 显示第几个数据
      })
    }, 1000)
    this.resDebounce = this.debounce(this.chart.resize, 300)
    window.addEventListener('resize', this.resDebounce)
  },
  destroyed() {
    window.addEventListener('resize', this.resDebounce)
  }
}
</script>

<style lang="less" scoped>
.superposition-bar-chart {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
